<template>
  <div :class="['main-container',{hideSidebar:isCollapse}]">
    <!--  菜单区域  -->
    <div class="main-left">
      <menu-component :isCollapse="isCollapse" :activeMenu="activeMenu" @menu-selected="handleMenuSelect"/>
    </div>
    <div class="main-right">
      <dev class="main-right-header">
        <el-card>
          <!-- 隐藏菜单 -->
          <div>
            <el-icon v-if="isCollapse==false" @click="isCollapse=true" :style="{ fontSize: 30 + 'px',color:'#000' }">
              <Fold/>
            </el-icon>
            <el-icon v-if="isCollapse==true" @click="isCollapse=false" :style="{ fontSize: 30 + 'px',color:'#000' }">
              <Expand/>
            </el-icon>
          </div>
          <!-- 面包屑数据 -->
          <div style="margin-top: 10px">
            <el-tag v-for="(tag,index) in tags" :key="tag.name" :closable="tag.closable" @close="closeTag(index)" @click="clickTag(tag)"
                    :type="tag.type" style="margin-right: 10px;cursor: pointer;">
              {{ tag.name }}
            </el-tag>
          </div>
        </el-card>
      </dev>
      <dev class="main-right-bottom">
        <router-view></router-view>
      </dev>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import router from "@/router";
import { useRoute } from 'vue-router';
import type {TagProps} from 'element-plus'
import MenuComponent from '@/components/menu/MenuComponent.vue';

const isCollapse = ref(false)
// 获取当前路由信息
const route = useRoute();
const activeMenu = ref(route.path);
/* 菜单选中事件 */
const handleMenuSelect = (menuInfo: { name: string; route: string }) => {
  if (tags.value.filter((item) => item.url === menuInfo.route).length == 0) {
    tags.value.forEach((item) => {item.type = 'info';})
    tags.value.push({name: menuInfo.name, closable: true, type: 'success', url: menuInfo.route})
    clickTag({name: menuInfo.name,closable: true, type: 'success',url: menuInfo.route})
  } else {
    tags.value.forEach((item) => {
      if (item.url === menuInfo.route) {
        item.type = 'success';
      } else {
        item.type = 'info';
      }
    })
  }
}

/* 面包屑标签相关事件 */
interface TagsItem {
  name: string // 标签名称
  url: string // 标签对应的路由路径
  closable: boolean// 标签是否可关闭
  type: TagProps['type'] // 标签的类型
}

// 模拟数据
const tags = ref<TagsItem[]>([
  {name: '首页', closable:false,type: 'success', url: "/dashboard"},
])

function clickTag(tag: TagsItem) {
  console.log('点击标签:', tag);
  tags.value.forEach((item) => {
    if (item.url === tag.url) {
      item.type = 'success'; // 重置其他标签的类型为默认类型
      activeMenu.value = item.url
    } else {
      item.type = 'info'; // 重置其他标签的类型为默认类型
    }
  });
  router.push(tag.url); // 跳转到对应的路由
}

function closeTag(index: number) {
  console.log(`关闭标签: ${tags.value[index]}`);
  tags.value.splice(index, 1); // 从数组中移除标签
}
</script>

<style>
.main-right-header {
  display: block;
  border-radius: 10px;
  margin-top: 5px;
}

.main-right {
  height: 100%;
  transition: margin-left .28s;
  margin-left: 205px;
  background-color: #fff;
}

.hideSidebar .main-right {
  margin-left: 70px;
}

.main-left {
  position: fixed;
  z-index: 1001;
  height: 100%;
  background-color: #fff;
}

.main-container {
  position: relative;
  height: 100%;
  width: 100%;
}

.el-menu-vertical-demo {
  width: 200px;
  height: 100%;
}

.breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 10px;
  line-height: 25px;
  background-color: #86f39254;
  border-radius: 5px;
}

.breadcrumb > span {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
}
</style>